<template>
    <div class="app-container">
        <div class="search-container">
            <el-form v-show="showSearch" ref="queryParamsRef" :inline="true" :model="queryParams" label-width="80px">
                <el-form-item label="系统模块" style="width: 10%;" prop="title">
                    <el-input v-model="queryParams.title" clearable placeholder="请输入系统模块"
                        @keyup.enter.native="handleQuery" />
                </el-form-item>
                <el-form-item label="操作人员" style="width: 10%;" prop="operName">
                    <el-input v-model="queryParams.operName" clearable placeholder="请输入操作人员"
                        @keyup.enter.native="handleQuery" />
                </el-form-item>
                <el-form-item style="width: 10%;" label="类型" prop="businessType">
                    <el-select class="width-120" v-model="queryParams.businessType" clearable placeholder="操作类型">
                        <el-option v-for="dict in dictDataMap['sys_oper_type']" :key="dict.dictValue"
                            :label="dict.dictLabel" :value="dict.dictValue" />
                    </el-select>
                </el-form-item>
                <el-form-item label="状态" prop="status">
                    <el-radio-group v-model="queryParams.status" @change="handleQuery">
                        <el-radio value="">全部</el-radio>
                        <el-radio v-for="dict in dictDataMap['sys_common_status']" :key="dict.dictValue"
                            :value="dict.dictValue">{{
                                dict.dictLabel }}
                        </el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="操作时间">
                    <el-date-picker v-model="dateRange" :unlink-panels="true" end-placeholder="结束日期"
                        range-separator="截止" start-placeholder="开始日期" type="datetimerange"
                        value-format="YYYY-MM-DD HH:mm:ss"></el-date-picker>
                </el-form-item>
                <div style="float: right" class="mr20">
                    <query-form-button @handleQuery="handleQuery" @resetQuery="resetQuery" />
                </div>
            </el-form>
        </div>
        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button v-hasPerm="['system:operLog:remove']" :disabled="multiple" plain type="danger"
                    @click="handleDelete"><template #icon><i-ep-delete /></template>删除
                </el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button v-hasPerm="['system:operLog:remove']" plain type="danger" @click="handleClean"><template
                        #icon><i-ep-delete /></template>清空
                </el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button v-hasPerm="['system:operLog:export']" plain type="warning" @click="handleExport"><template
                        #icon><i-ep-download /></template>导出
                </el-button>
            </el-col>
        </el-row>

        <el-table ref="tables" v-adaptive :data="listTable" :default-sort="defaultSort" :border="true"
            :header-cell-style="$headerCellStyle" highlight-current-row :stripe="true"
            @selection-change="handleSelectionChange" @sort-change="handleSortChange">
            <el-table-column :align="'center'" type="selection" width="55" />
            <el-table-column :show-overflow-tooltip="true" :header-align="'center'" label="日志编号" prop="operId" />
            <el-table-column :show-overflow-tooltip="true" :header-align="'center'" label="系统模块" prop="title" />
            <el-table-column :align="'center'" label="操作类型" prop="businessType" width="100">
                <template #default="scope">
                    <dict-data-tag :options="dictDataMap['sys_oper_type']" :value="scope.row.businessType" />
                </template>
            </el-table-column>
            <el-table-column :align="'center'" label="请求方式" prop="requestMethod" width="100" />
            <el-table-column :show-overflow-tooltip="true" :sort-orders="['descending', 'ascending']"
                :header-align="'center'" label="操作人员" prop="operName" sortable="custom" width="120" />
            <el-table-column :show-overflow-tooltip="true" :align="'center'" label="主机" prop="operIp" width="120" />
            <el-table-column :align="'center'" label="操作状态" prop="status" width="120">
                <template #default="scope">
                    <dict-data-tag :options="dictDataMap['sys_common_status']" :value="scope.row.status" />
                </template>
            </el-table-column>
            <el-table-column :sort-orders="['descending', 'ascending']" :align="'center'" label="操作日期" prop="operTime"
                sortable="custom" width="180">
                <template #default="scope">
                    <span>{{ $parseTime(scope.row.operTime) }}</span>
                </template>
            </el-table-column>
            <el-table-column :align="'center'" class-name="small-padding fixed-width" label="操作" width="100">
                <template #default="scope">
                    <el-button type="primary" @click="handleView(scope.row)"><template #icon><i-ep-view /></template>详情
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <pagination v-show="total > 0" v-model:limit="queryParams.pageSize" v-model:page="queryParams.pageNum"
            :total="total" @pagination="getList" />

        <!-- 操作日志详细 -->
        <el-dialog v-model="open" append-to-body title="操作日志详细" width="700px">
            <el-form ref="formRef" v-model="form" label-width="100px">
                <el-row :gutter="40">
                    <el-col :span="24">
                        <!-- <el-form-item label="操作模块：">{{ form.title }} / {{ typeFormat(form) }}</el-form-item> -->
                        <el-form-item label="登录信息：">{{ form.operName }} / {{ form.operIp }}
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="请求地址：">{{ form.operUrl }}</el-form-item>
                        <el-form-item label="请求方式：">{{ form.requestMethod }}</el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="操作方法：">{{ form.method }}</el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="请求参数：">
                          <div style="width: 100%;">
                            {{ form.operParam }}
                          </div>

                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="返回参数：">{{ form.jsonResult }}</el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="操作状态：">
                            <div v-if="form.status === 0">正常</div>
                            <div v-else-if="form.status === 1">失败</div>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="操作时间：">{{ $parseTime(form.operTime) }}</el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item v-if="form.status === 1" label="异常信息：">{{ form.errorMsg }}</el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="open = false">关 闭</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script lang="ts" setup>
import {cleanOperlog, delOperlog, list} from "@/api/system/operlog.ts";
import {useDictStoreHook} from "@/store/modules/dict.ts";

const dictStore = useDictStoreHook()
const dictDataMap = ref(dictStore.isTypeGetData('sys_oper_type', 'sys_common_status'))
const { proxy } = getCurrentInstance() as any
const tables = ref()
// 选中数组
const ids = ref([])
// 非多个禁用
const multiple = ref(true)
// 显示搜索条件
const showSearch = ref(true)
// 总条数
const total = ref(0)
// 表格数据
const listTable = ref([])
// 是否显示弹出层
const open = ref(false)
// 日期范围
const dateRange = ref([])
// 默认排序
const defaultSort = ref({ prop: 'operTime', order: 'descending' })
// 表单参数
const form = ref<any>({})
// 查询参数
const queryParamsRef = ref()
const queryParams = ref<any>({
    pageNum: 1,
    pageSize: 10,
    title: undefined,
    operName: undefined,
    businessType: undefined,
    status: ''
})
getList()
/** 查询登录日志 */
function getList() {
    list(proxy.$addDateRange(queryParams.value, dateRange.value)).then((response: any) => {
        listTable.value = response.rows;
        total.value = response.total;
    });
}
// 操作日志类型字典翻译
function typeFormat(row) {
    return proxy.$selectDictLabel(dictDataMap.value['sys_oper_type'], row.businessType);
}
/** 搜索按钮操作 */
function handleQuery() {
    queryParams.value.pageNum = 1;
    getList();
}
/** 重置按钮操作 */
function resetQuery() {
    queryParamsRef.value.resetFields()
    dateRange.value = [];
    tables.value.sort(defaultSort.value.prop, defaultSort.value.order)
    handleQuery();
}
/** 多选框选中数据 */
function handleSelectionChange(selection) {
    ids.value = selection.map((item: any) => item.operId)
    multiple.value = !selection.length
}
/** 排序触发事件 */
function handleSortChange(column: any, _prop, _order) {
    queryParams.value.orderByColumn = column.prop;
    queryParams.value.isAsc = column.order;
    getList();
}
/** 详细按钮操作 */
function handleView(row) {
    open.value = true;
    form.value = row;

}
/** 删除按钮操作 */
function handleDelete(row) {
    const operIds = row.operId || ids.value;
    ElMessageBox.confirm('是否删除选中的数据项？',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        delOperlog(operIds).then(() => {
            getList();
            ElMessage.success("删除成功");
        })
    }).catch(() => {
    });
}
/** 清空按钮操作 */
function handleClean() {
    ElMessageBox.confirm('是否确认清空所有操作日志数据项？',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        cleanOperlog().then(() => {
            getList();
            ElMessage.success("清空成功");
        })
    }).catch(() => {
    });
}
/** 导出按钮操作 */
function handleExport() {
    // this.download('system/operLog/export', {
    //     ...this.queryParams
    // }, `operlog_${new Date().getTime()}.xlsx`)
}

</script>
